<template>
    <!--客户端窗口-->
    <div>
        <el-container class="clientPannel"> 
            <!--左侧部分-->
            <el-container :class="{leftArea: ($route.path == '/home'), 'leftArea-other':!($route.path == '/home')}" style="overflow: hidden;">
                <el-header class="headBar" height="100px">
                    <!-- 大导航栏 -->
                    <client-big-nav/>
                </el-header>

                <el-main class="bodyBar" style="padding: 0;">
                        <router-view></router-view>
                </el-main>
            </el-container>
                    
            <!--右侧部分-->
            <el-aside id="rightBar" width="280px">
                <el-container>
                    <!--右侧顶部-->
                    <el-header class="headBar" height="100px" style="padding: 0;">
                        <el-container>
                            <el-aside width="100px">
                                <!--玩家游戏头像-->
                                <el-avatar 
                                    style="margin-left: 20px; margin-top: 20px;" 
                                    :size="65" 
                                    :src="currUser.img" 
                                    class="touXiang"
                                    @click.native="isChangeTouXiangWinShow = isShowBackPannel = true"
                                />
                                <!--当前玩家的信息卡-->
                                <div class="currUserCard">
                                    <!--上-->
                                    <div style="border-bottom: 1px solid rgb(30, 62, 90); height: 95px;overflow: hidden; background-size: 100% auto;"
                                        :style="{backgroundImage: 'url(' + currUser.cardBg + ')'}">
                                    </div>
                                        
                                    <!--中-->
                                    <div style="border-bottom: 1px solid rgba(92, 92, 92, 0.5); height: 120px; padding-left: 35px;">
                                        <el-avatar class="touXiang" :src="currUser.img" :size="90" style="border: 5px solid rgb(49, 49, 119); margin-top: -10px; margin-left: 5px"></el-avatar>
                                        <p style="font-size: 25px; margin-top: -70px; margin-left: 120px; line-height: 25px;" class="friendName">
                                            <b>{{currUser.gameId}}</b><br>
                                            <a style="font-size: 15px; color: rgba(255, 248, 218, 0.7); ">{{currUser.rank}}</a>
                                        </p>
                                    </div>
                                        
                                    <!--下-->
                                    <div>
                                        <p :style="{color: state[currUser.gameState].color}" style="vertical-align: middle; font-size: 16px; margin-top: 10px; margin-left: 30px;" class="friendName">
                                            *{{state[currUser.gameState].text == "游戏中" ? (gameMod[Math.floor(Math.random()*gameMod.length)] + hero[Math.floor(Math.random()*hero.length)]) :state[currUser.gameState].text}}
                                        </p>
                                    </div>
                                </div>
                            </el-aside>
                                    

                            <!--玩家游戏ID-->
                            <el-main style="padding: 0;">
                                <p style="color: rgb(253, 255, 240); font-size: 18px; margin-bottom: 5px; margin-top: 35px;">
                                    <b>{{currUser.gameId}}</b>
                                </p>
                                <p :style="{color: state[currUser.gameState].color}" style="margin-top: 5px; cursor: pointer;" @click="switchState(currUser)">
                                    *{{state[currUser.gameState].text}}
                                </p>
                            </el-main>
                        </el-container>
                    </el-header>
                    <el-main class="bodyBar" style="padding: 0;">
                        <p style="margin-top: 8px; margin-left: 10px; color: rgb(197, 189, 152); font-size: 15px;">
                            <b>好友列表</b>
                            <i @click="isAddFriendWinShow = isShowBackPannel = true" class="el-icon-user-solid friendBtn" style="cursor: pointer; font-size: 20px; margin-left: 180px;"></i>
                            <ul style="padding-left: 0;">
                                <!--一个好友位-->
                                <li v-for="f in currUser.friends" :key="f.index"  style="height: 60px; margin-right: 10px;" class="friendBox" @contextmenu="openMenu" :thisUser="f.gameId">
                                    <el-container style="padding-top: 7px; padding-left: 5px;" :style="{opacity: f.gameState==0 ? 0.5 : 1}">
                                        <el-aside width="50px">
                                            <!--好友头像-->
                                            <el-avatar :src="f.img" :size="40" style="margin-top: 3px; margin-left: 5px" class="touXiang"></el-avatar>
                                        </el-aside>
                                        <!--好友id与游戏状态-->
                                        <el-main style="padding: 0;">
                                            <p style="font-size: 16px; margin-top: 0; margin-bottom: 2px;" class="friendName">
                                                {{f.gameId}}
                                            </p>
                                            <p style="margin-top: 0; font-size: 15px; margin-bottom: 0;" :style="{color: state[f.gameState].color}">
                                                *{{state[f.gameState].text}}
                                            </p>
                                        </el-main>
                                    </el-container>
                                        
                                    <!--玩家信息卡-->
                                    <div class="userCard">
                                        <!--上-->
                                        <div style="border-bottom: 1px solid rgb(30, 62, 90); height: 95px;overflow: hidden; background-size: 100% auto;"
                                            :style="{backgroundImage: 'url(' + f.cardBg + ')'}">
                                        </div>
                                        <!--中-->
                                        <div style="border-bottom: 1px solid rgba(92, 92, 92, 0.5); height: 120px; padding-left: 35px;">
                                            <el-avatar class="touXiang" :src="f.img" :size="90" style="border: 5px solid rgb(49, 49, 119); margin-top: -10px; margin-left: 5px"></el-avatar>
                                            <p style="font-size: 25px; margin-top: -70px; margin-left: 120px; line-height: 25px;" class="friendName">
                                                <b>{{f.gameId}}</b><br>
                                                <a style="font-size: 15px; color: rgba(255, 248, 218, 0.7); ">{{f.rank}}</a>
                                            </p>
                                        </div>
                                        <!--下-->
                                        <div>
                                            <p :style="{color: state[f.gameState].color}" style="vertical-align: middle; font-size: 16px; margin-top: 10px; margin-left: 30px;" class="friendName">
                                                *{{state[f.gameState].text == "游戏中" ? (gameMod[Math.floor(Math.random()*gameMod.length)] +'—'+ hero[Math.floor(Math.random()*hero.length)]) :state[f.gameState].text}}
                                            </p>
                                        </div>
                                    </div>
                                </li>
                                </ul>
                            </p>
                        </el-main>
                </el-container>
            </el-aside>
        </el-container>


        <!--添加好友窗口-->
        <add-friend-win
            v-if="isAddFriendWinShow"
            @contextmenu="noContextMenu"
            :addFriend="addFriend"
            :currUser="currUser"
            :closeAddFriendWin="closeAddFriendWin"
        />

        <!--更换头像窗口-->
        <tou-xiang-change-win
            v-show="isChangeTouXiangWinShow"
            @contextmenu="noContextMenu"
            :closeChangeTouXiangWin = "closeChangeTouXiangWin"
            :currUser="currUser"
        />

        <!-- 藏品窗口 -->
        <heros-win 
            v-show="isHerosWinShow"
            @contextmenu="noContextMenu"
        />


        <!--幕布-->
        <div v-if="isShowBackPannel" class="blackPannel" @contextmenu="noContextMenu"></div>
    </div>
</template>

<script>
import ClientBigNav from './ClientBigNav.vue'
import AddFriendWin from './AddFriendWin.vue'
import TouXiangChangeWin from './TouXiangChangeWin.vue'
import HerosWin from './HerosWin.vue'

export default {
    name: 'ClientWin',
    components:{
        ClientBigNav,
        AddFriendWin,
        TouXiangChangeWin,
        HerosWin,
    },
    data(){
        return{
            //游戏状态
            state:[
                {index: 0, text: "离线", color: "#A9A9A9"},
                {index: 1, text: "在线", color: "#32CD32"},
                {index: 2, text: "离开", color: "#A9A9A9"},
                {index: 3, text: "队列中", color: "#00BFFF"},
                {index: 4, text: "游戏中", color: "#00BFFF"},
            ],

            //游戏模式（小彩蛋）
            gameMod:["嚎哭深渊（匹配模式）", "召唤师峡谷（单排/双排）", "召唤师峡谷（灵活5v5）", "召唤师峡谷（轮换模式）"],

            hero:["无极剑圣", "疾风剑豪", "无双剑姬", "蛮族之王", "德邦总管"],

            //是否显示黑幕
            isShowBackPannel: false,

            //是否显示添加好友窗口
            isAddFriendWinShow: false,

            //是否显示更换头像窗口
            isChangeTouXiangWinShow: false,

            //是否显示藏品窗口
            isHerosWinShow: false,
        }
    },
    methods:{
        //传给子组件AddFriendWin,用于关闭添加好友界面
        closeAddFriendWin(){
            this.isShowBackPannel = false
            this.isAddFriendWinShow = false
        },

        //传给子组件TouXiangChangeWin,用于关闭修改头像界面
        closeChangeTouXiangWin(){
            this.isShowBackPannel = false
            this.isChangeTouXiangWinShow = false
        },
    },
    props:[
        'userInfo', 
        'version',
        'currUser', 
        'isShowClient', 
        'sortFriendBarByState',
        'switchState',
        'noContextMenu',
        'addFriend',
        'openMenu',
    ],
    mounted() {
        //UpDate 0.2s
        setInterval(()=>{
            if(this.isShowClient && this.currUser){
                this.sortFriendBarByState();
            }
        }, 200)
    },
}
</script>

<style>
    .clientPannel{
        margin-top: 30px;
        height: 900px; 
        width: 1600px;
        background-color: rgb(9, 14, 20);
        margin-left: auto;
        margin-right: auto; 

        border-left:1px solid rgb(9, 14, 20);
        border-right:1px solid rgb(9, 14, 20);
        border-bottom:1px solid rgb(9, 14, 20);
    }

    #rightBar{
        background-color: rgb(9, 14, 20);
    }

    .leftArea{
        padding: 0;
        background: url(../assets/Iamges/server_page.jpg);
        background-repeat: no-repeat;
        background-size: auto 100vh;
    }

    .leftArea-other{
        padding: 0;
        background-image: linear-gradient(180deg,rgb(9, 14, 20),rgb(4, 36, 54));
        background-repeat: no-repeat;
        background-size: auto 100vh;
    }

    .headBar{
        border-top:2px solid rgb(128, 110, 9);
        background-image: linear-gradient(to bottom, rgb(9, 14, 20, 1),rgb(9, 14, 20, 0.95), rgba(9,14,20,0.6));
    }

    .bodyBar{
        border-top:1px solid rgba(134, 129, 108, 0.5);
    }

    #leftBodyHeadBar{
        background-image: linear-gradient(to bottom, rgb(9, 14, 20, 0.6),rgb(9, 14, 20, 0.4), rgba(9,14,20,0));
    }


    /* 导航栏样式 */
    .nav li{
        margin-top: -10px;
        color: rgb(199, 188, 139);
        float: left;
        margin-right: 52px;
        font-size: 15px;
        list-style: none;
        cursor: pointer;
    }

    /*好友位样式(一个格子)*/
    .friendBox:hover{
        background-color: rgba(255, 255, 255, 0.1);
        cursor: pointer;
    }

    /*指针hover的好友名字*/
    .friendBox:hover .friendName{
        color: rgb(255, 251, 231);
    }

    /*常态的好友名字*/
    .friendName{
        color: rgba(255, 247, 205, 0.7);
    }

    /*玩家信息卡*/
    .friendBox:hover .userCard{
        display: block;
    }

    .userCard{
        display: none;
        background-color: rgba(9, 14, 20);
        border: 3px solid rgb(128, 110, 9);
        border-image: linear-gradient(90deg, rgb(99, 85, 6), rgb(128, 110, 9)) 20 20;
        position: absolute;
        height: 260px;
        width: 480px;
        z-index: 99;
    
        margin-left: -500px;
        margin-top: -150px;
        
    }

    .touXiang:hover + .currUserCard{
        display: block;
    }

    .currUserCard{
        display: none;
        background-color: rgba(9, 14, 20);
        border: 3px solid rgb(128, 110, 9);
        border-image: linear-gradient(90deg, rgb(99, 85, 6), rgb(128, 110, 9)) 20 20;
        position: absolute;
        height: 260px;
        width: 480px;
        z-index: 99;

        margin-left: -500px;
        margin-top: -50px;

    }

    /*弹窗样式*/
    .windowBox{
        background-color: rgba(9, 14, 20);
        border: 3px solid rgb(128, 110, 9);
        border-image: linear-gradient(90deg, rgb(49, 42, 4), rgb(90, 77, 5)) 20 20;
        position: absolute;
        z-index: 99;

        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .windowBoxBig{
        background-color: rgba(9, 14, 20);
        border: 3px solid rgb(128, 110, 9);
        border-image: linear-gradient(180deg, rgb(49, 42, 4), rgb(77, 66, 4)) 20 20;
        position: absolute;
        z-index: 99;

        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .touXiang{
        border-radius: 50%; 
        border: 3px solid rgba(87, 88, 22, 0.6);
        cursor: pointer;
    }

    .touXiang:hover{
        border: 3px solid rgb(158, 160, 33);
    }

    .friendBtn:hover{
        color: rgb(255, 255, 197);
    }

    .clientInput{
        margin-top: 10px; 
        margin-left: 20px; 
        background-color: rgba(0, 0, 0, 0.5);
        color: rgba(197, 197, 197, 0.7);
        font-size: 16px;

        border: 1px solid rgb(105, 73, 42);
        padding-left: 35px;

        height: 35px;
        width: 510px;
    }

    .clientInput:focus{
        border: 1px solid rgb(138, 102, 61);
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.15)) ;
        border-radius: 0;
    }

    .blackPannel{
        height: 900px;
        width: 1600px;

        position:absolute;
        top: 0;
        margin-top: 37px;

        /* 水平居中显示 */
        left:50%;
        /* margin值为宽的一半 */
        margin-left:-800px;

        background-color: rgba(0, 0, 0, 0.6);
    }

    .cbtn:hover{
        border-image: linear-gradient(180deg, rgb(223, 212, 149), rgb(131, 122, 74)) 20 20;
        background-image: linear-gradient(rgb(128, 102, 17), rgb(66, 55, 16)); 
    }

    .cbtn{
        position: absolute; 
        bottom: -3px; 
        right: 330px; 
        height: 43px; 
        width: 102px; 
        color: rgb(189, 185, 139);
        background-image: linear-gradient(rgb(114, 91, 15), rgb(46, 38, 11)); 
        border: 3px solid; 
        border-image:linear-gradient(rgb(73, 63, 5), rgb(219, 200, 92)) 20 20;
    }

    .cbtn2:hover{
        background-image: linear-gradient( rgba(9, 14, 20), rgb(44, 57, 71));
        border: 2px solid rgb(151, 131, 15);
    }

    .cbtn2{
        background-image: linear-gradient( rgb(33, 43, 54), rgba(9, 14, 20)); 
        border: 2px solid rgb(128, 110, 9); 
        height: 39px; 
        width: 114px; 
        left: 10px;
        margin-left: 10px;
    }

    /* 路由过度动画 */
    .v-enter-active{
        animation: enter .5s;
    }
    .v-leave-active{
        animation: enter .5s reverse;
    }
    @keyframes enter{
        from{
            opacity: 0;
        }
        to{
            opacity: 1;
        }
    }
</style>